//mixin:混入 像函数
//函数的定义和调用

//一.普通的定义和调用函数
//定义一个.common函数
// .common{
//     width: 100px;
//     height: 100px;
// }
// .box1 {
//     .common;//调用common函数
//     background-color: cyan;
// }
// .box2 {
//     .common;//调用common函数
//     background-color: red;
// }
// .box3 {
//     .common;//调用common函数
//     background-color:green;
// }


//二.函数的传参
// .common(@w,@h){
//     width: @w;
//     height:@h;
// }

// .box1 {
//     .common(200px, 200px);
//     background-color: red;
// }
// .box2{
//     .common(200px,300px);
//     background-color: blue;
// }

//三.给默认参数
//默认参数 有参数传入 以传入的参数为准 如果没有参数传入那么以默认参数为准
// .commonStyle(@w:100px,@h:200px){
//     width:@w;
//     height: @h;
// }
// .box1 {
//     .commonStyle(200px,400px);
//     background-color: cyan;
// }
// .box2 {
//     .commonStyle();
//     background-color: red;
// }


//四.函数的作用域
.container {
    .common(@a){
        width: @a;
        height: 100px;
    }
}
.box1 {
    .container .common(108px);//调用container内的common样式
    border: 1px solid;
}